<html>
<script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
<style>
	.monitor-panel {
		background-color: #fff;
		border-radius: 14rem;
		box-shadow: 0 8rem 10rem 0 rgba(0, 0, 0, 0.08);
	}

	.monitor-top {
		padding: 20rem;

	}

	.monitor-title {
		display: flex;
		align-items: center;
		font-size: 36rem;
		color: #282828;
	}

	.addr-img {
		width: 40rem;
		height: 40rem;
		margin-right: 15rem;
		flex-shrink: 0;
	}

	.monitor-date {
		margin-top: 15rem;
		font-size: 26rem;
		color: #8C8C8C;
	}

	.action-box {
		position: relative;
		text-align: center;
		padding: 20rem 0;
	}

	.monitor-img {
		width: 300rem;
		height: 300rem;
		display: inline-block;
	}

	.monitor-big-img,
	.monitor-small-img {
		width: 56rem;
		height: 56rem;
		position: absolute;
		right: 15rem;
		z-index: 11;
	}

	.monitor-big-img {
		bottom: 85rem;
	}

	.monitor-small-img {
		bottom: 15rem;
	}

	.action-btnbox {
		position: absolute;
		width: 300rem;
		height: 300rem;
		margin: 0 auto;
		left: -999px;
		right: -999px;
		z-index: 10
	}

	.action-mid {
		width: 100%;
		display: flex;
	}

	.action-btn {
		width: 100%;
		height: 100rem;
		-webkit-touch-callout: none;
		/*系统默认菜单被禁用*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-khtml-user-select: none;
		/*早期浏览器*/
		-moz-user-select: none;
		/*火狐*/
		-ms-user-select: none;
		/*IE10*/
		user-select: none;
	}

	.action-scalebox {
		position: absolute;
		left: -900rem;
		right: -900rem;
		margin: auto;
		top: -900px;
		bottom: -900px;
		height: 150rem;
		width: 150rem;
		z-index: 11;
	}

	.action-scale {
		width: 150rem;
		height: 75rem;
		-webkit-touch-callout: none;
		/*系统默认菜单被禁用*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-khtml-user-select: none;
		/*早期浏览器*/
		-moz-user-select: none;
		/*火狐*/
		-ms-user-select: none;
		/*IE10*/
		user-select: none;
	}

	#my-video {
		width: 100%;
		height: 500rem;
	}
</style>

<body>
	<div class="container monitor-container">
		<div class="monitor-panel">
			<div class="monitor-top">
				<div class="monitor-title">
					<img class="addr-img" src="./address.png" mode="widthFix" />
					<span id="deviceName"></span>
				</div>
				<!-- <div id="nowTimeStr" class="monitor-date"></div> -->
			</div>
			<div style="position: relative;">
				<img id="playBtn" src="./play.png" mode="widthFix"
					style="position: absolute;left: -9999px;right: -9999px;top: -9999px;bottom: -9999px;width: 200rem;z-index: 11;margin: auto;"
					onclick="goPlay()" />
				<video id="my-video" class="video-js" controls preload="auto"></video>
			</div>

			<div class="action-box">
				<div class="action-btnbox">
					<div class="action-btn" ontouchstart="ptzDirection(0,1)" ontouchend="ptzDirection(0,0)"></div>
					<div class="action-mid">
						<div class="action-btn" ontouchstart="ptzDirection(2,0)" ontouchend="ptzDirection(0,0)">
						</div>
						<div class="action-btn" ontouchstart="ptzDirection(1,0)" ontouchend="ptzDirection(0,0)">
						</div>
					</div>
					<div class="action-btn" ontouchstart="ptzDirection(0,2)" ontouchend="ptzDirection(0,0)"></div>
					<div class="action-scalebox">
						<div class="action-scale" ontouchstart="ptzscale(1)" ontouchend="ptzscale(0)"></div>
						<div class="action-scale" ontouchstart="ptzscale(2)" ontouchend="ptzscale(0)"></div>
					</div>
				</div>
				<img class="monitor-img" src="./monitor.png?type=1" mode="widthFix" />
			</div>
			<div id="log" style="font-size: 30rem;"></div>
		</div>
</body>

</html>
<script>
	window.onload = function () {
		setRemSize()
		document.getElementById('deviceName').innerHTML = getUrlParams('name')


	}
	function goPlay() {
		var url = getUrlParams('url')
		var player = document.getElementById('my-video');
		if (flvjs.isSupported()) {
			var flvPlayer = flvjs.createPlayer({
				type: 'flv',
				"isLive": true,
				url: url
			});
			flvPlayer.attachMediaElement(player);
			flvPlayer.load();
			player.play();
		}
		var playBtn = document.getElementById('playBtn');
		playBtn.style = 'display:none'
	}

	function setRemSize() {
		const oMeta = document.createElement("meta");
		oMeta.name = "viewport";
		oMeta.id = "viewport";
		const windowWidth = document.body.offsetWidth < window.screen.width ? document.body.offsetWidth : window.screen
			.width;
		let num = 100;
		if (window.navigator.appVersion.match(/iphone/gi)) {
			oMeta.content = "initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no";
			num = 100;
		} else {
			oMeta.content = "initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no";
		}
		document.getElementsByTagName("head")[0].appendChild(oMeta);
		const remsize = ((windowWidth / 750) * num).toFixed(0) / 100;
		document.getElementsByTagName("html")[0].style.fontSize = remsize + "px";
		document.getElementsByTagName("html")[0].dataset.remsize = remsize;
	}

	function ptzDirection(leftRight, upDown) {
		var data = {
			leftRight: leftRight,
			upDown: upDown,
			movespeed: 125,
			deviceId: getUrlParams('deviceId'),
			channelId: getUrlParams('channelId')
		}
		api(`https://www.tylxj.top/api/sip/ptz/direction/${data.deviceId}/${data.channelId}`, data)

	}

	function ptzscale(inOut) {
		var data = {
			inOut,
			scalespeed: 30,
			deviceId: getUrlParams('deviceId'),
			channelId: getUrlParams('channelId')
		}
		api(`https://www.tylxj.top/api/sip/ptz/scale/${data.deviceId}/${data.channelId}`, data)

	}

	function getUrlParams(paramName) {
		const regex = new RegExp('[?&]' + paramName + '=([^&#]*)');
		const results = regex.exec(window.location.search);
		return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
	}

	function api(url, data) {
		var log = document.getElementById('log');
		try {
			var xhr = new XMLHttpRequest();
			var token = getUrlParams('token')
			xhr.open("post", url, true);
			xhr.setRequestHeader('Authorization', 'Bearer ' + token);
			xhr.setRequestHeader('content-type', 'application/json');
			xhr.onreadystatechange = function () {
				
				//log.innerHTML = JSON.stringify(xhr.responseText) + '__end'
				if (xhr.readyState == 4 && xhr.status == 200) {
					console.log(xhr.responseText);
				}
			};
			//log.innerHTML = 'do'
			xhr.send(JSON.stringify(data));
		} catch (error) {
			
			//log.innerHTML = 'error---'
		}

	}
</script>